<template>
  <div class="service">
    <!-- 顶部 标头 -->
    <mt-header fixed="fixed">
      <router-link to="#" slot="left">
        <mt-button>家政平台</mt-button>
      </router-link>
    </mt-header>

    <!-- 搜索栏 -->
    <van-row class="search">
      <van-col class="search_col">
        <van-search @search="searchJob(searchcontent)" v-model="searchcontent" placeholder="智能匹配" />
      </van-col>
      <van-col @click="isUpdateFarenShowArea = true">
        <div class="region">
          <span class="changsha">{{ dizhi }}</span>
          <span class="jiazheng xiatubiao" :value="zhucelocal">
            <i class="jiazheng icon-xiala1"></i>
          </span>
        </div>
      </van-col>
    </van-row>

    <!-- 岗位 -->
    <van-row class="van_span">
      <van-col>
        <span @click="jobSpan(index, item)" :class="artic === index ? 'artic' : ''" v-for="(item, index) in jobs" :key="index" class="span">{{ item }}</span>
      </van-col>
      <van-col class="van_span_btn">
        <van-button @click="fiterShowSearch" round>更多筛选</van-button>
      </van-col>
    </van-row>

    <!-- 人员 -->
    <van-row class="xiala">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" success-text="刷新成功">
          <van-row class="van-xinxi">
            <service-user @list-user="listUser($event)" :list="list" />
          </van-row>
        </van-list>
      </van-pull-refresh>
    </van-row>

    <!-- 下拉弹出层 -->
    <van-popup v-model="isUpdateFarenShowArea" position="bottom">
      <van-area :area-list="areaList" @confirm="onConfirmThree" @cancel="isUpdateFarenShowArea = false" />
    </van-popup>

    <!-- 点击搜索框弹出层 -->
    <van-popup class="van-popup_xia" v-model="filterShowTan" position="bottom" style="height: 100%">
      <!-- 导航栏 -->
      <van-row>
        <van-nav-bar :fixed="true" title="用户筛选" @click-left="filterShowTan = false">
          <template #left>
            <van-icon name="cross" size="18" />
          </template>
        </van-nav-bar>
      </van-row>
      <filter-show @queren-tiaojian="filterShowTan = false" />
    </van-popup>
  </div>
</template>

<script>
import Arealist from '@/utils/area'
import '@/mock/px-mock.js'
import FilterShow from './filterShow/FilterShow'
import ServiceUser from './serviceUser/index'
import { userJob, userProfile } from '@/api/px-my'
export default {
  name: 'service',
  components: {
    FilterShow,
    ServiceUser
  },
  props: {},
  data () {
    return {
      loading: false,
      finished: false,
      refreshing: false,
      dizhi: '长沙',
      // 筛选弹出层
      filterShowTan: false,
      // 默认选中
      artic: 8,
      // 所有人员信息
      list: [],
      // 导航栏固定
      fixed: false,
      // 岗位
      jobs: null,
      // 注册地区
      zhucelocal: '',
      // 弹出层
      isUpdateFarenShowArea: false,
      // 搜索框内容
      searchcontent: '',
      // 省市区
      areaList: Arealist,
      // 关注列表
      followList: [],
    }
  },
  computed: {},
  watch: {},
  created () {
    this.getJob()
    this.userXinxi()
  },
  mounted () { },
  methods: {
    onRefresh () {
      setTimeout(() => {
        this.refreshing = false
        this.loading = false
        this.artic = 8
        this.userXinxi()
        this.finished = true
      }, 1000)
    },
    // 搜索
    searchJob (items) {
      const content = JSON.parse(window.localStorage.getItem('account'))
      const arr = []
      if (items.trim()) {
        console.log(items);
        content.list.map((item, index) => {
          if (content.list[index].jobss === items) {
            return arr.push(content.list[index])
          }
        })
        this.list = arr
      } else {
        this.list = content.list
      }
    },
    // 关注列表
    follow () {
      const content = JSON.parse(window.localStorage.getItem('account'))
      const arr = []
      content.list.map((item, index) => {
        if (content.list[index].status) {
          return arr.push(content.list[index])
        }
        this.followList = arr
        const list = JSON.stringify(arr)
        window.localStorage.setItem('FollowList', list)
      })
    },
    // 关注列表
    listUser (e) {
      this.list = e
    },
    // 获取筛选的岗位
    fiterShowSearch () {
      this.filterShowTan = true
    },
    // 点击岗位
    jobSpan (index, items) {
      this.artic = index
      const content = JSON.parse(window.localStorage.getItem('account'))
      const arr = []
      if (index !== 8) {
        content.list.map((item, index) => {
          if (content.list[index].jobss === items) {
            return arr.push(content.list[index])
          }
        })
        this.list = arr
      } else {
        this.list = content.list
      }
    },
    // 获取所有人员信息
    async userXinxi () {
      try {
        const data = await userProfile()
        this.list = data.data
        this.follow()
      } catch (err) {
        this.$toast('获取失败')
      }
    },
    // 获取岗位
    async getJob () {
      const data = await userJob()
      this.jobs = data.data
    },
    // 第一个选择器
    onConfirmThree (value) {
      const names = value[2].name
      this.dizhi = names
      this.isUpdateFarenShowArea = false
    },
  },
}
</script>

<style scoped lang="less">
/deep/ .van-popup_xia {
  .van-nav-bar {
    background: #1196db;
    .van-nav-bar__left {
      .van-icon {
        color: #fff;
      }
      .van-nav-bar__text {
        color: #fff;
      }
    }
    .van-nav-bar__title {
      color: #fff;
    }
  }
}
.service {
  .mint-header {
    height: 120px;
    background-color: #1196db;
    /deep/ .mint-button {
      font-size: 32px;
      .mint-button-text {
        font-weight: 700;
        margin-left: 20px;
      }
    }
    /deep/ .mintui {
      font-size: 32px;
    }
  }

  .search {
    display: flex;
    background-color: #1196db;
    height: 126px;
    margin-top: 121px;
    .van-col {
      .region {
        font-size: 30px;
        color: #fff;
        flex: 1;
        line-height: 105px;
        .jiazheng {
          font-size: 30px;
          padding-right: 10px;
        }
      }
    }
    .van-search {
      background-color: #1196db;
    }
    .search_col {
      display: inline-block;
      flex: 5;
    }
  }

  .van_span {
    padding: 20px 10px;
    background: #fff;
    /deep/ .van_span_btn {
      width: 100%;
      text-align: center;
      margin-top: 10px;
      .van-button {
        height: 60px;
        width: 100%;
        background: #1196db;
        .van-button__text {
          color: #fff;
        }
      }
    }
    .span {
      font-size: 30px;
      display: inline-block;
      color: #979191;
      border: 1px solid #979191;
      height: 50px;
      line-height: 50px;
      border-radius: 70px;
      padding: 0 40px;
      margin: 10px 10px;
    }
    .artic {
      color: #1196db;
      border-color: #1196db;
    }
  }
  .van-xinxi {
    margin-top: 20px;
    padding: 0 30px;
    background: #fff;
  }
  .xiala {
    margin-bottom: 140px;
  }
}
</style>
